<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页小字提示工具测试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 40px;
            margin-bottom: 20px;
        }
        h1 {
            color: #ff6700;
            margin-bottom: 30px;
            text-align: center;
        }
        h2 {
            color: #333;
            margin-top: 40px;
            margin-bottom: 20px;
            border-bottom: 2px solid #ff6700;
            padding-bottom: 10px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            background-color: #fafafa;
            border-radius: 4px;
        }
        .font-size-test {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }
        .test-item {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
            min-width: 150px;
            margin-bottom: 15px;
        }
        .test-item-label {
            font-weight: bold;
            color: #666;
            margin-bottom: 5px;
        }
        .with-br {
            white-space: pre-line;
        }
        .long-content {
            max-width: 300px;
        }
        .different-positions {
            position: relative;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-top: 20px;
        }
        .position-test {
            position: absolute;
            padding: 10px;
            background-color: rgba(255, 103, 0, 0.1);
            border: 1px dashed #ff6700;
        }
        .top-left {
            top: 10px;
            left: 10px;
        }
        .top-right {
            top: 10px;
            right: 10px;
        }
        .bottom-left {
            bottom: 10px;
            left: 10px;
        }
        .bottom-right {
            bottom: 10px;
            right: 10px;
        }
        .center {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .instructions {
            background-color: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin-top: 30px;
            border-radius: 0 4px 4px 0;
        }
        .instructions h3 {
            margin-top: 0;
            color: #1976d2;
        }
        .other-elements {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #fff;
        }
        .mixed-content {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>网页小字提示工具测试页面</h1>
        
        <div class="instructions">
            <h3>使用说明</h3>
            <p>此页面用于测试网页小字提示工具的功能。页面包含了不同大小的文字、带换行的文字、长内容文字、位于页面不同位置的文字以及不同类型的HTML元素，以测试工具在各种情况下的表现。</p>
            <p>工具应在字体大小小于等于设置值的所有类型HTML元素上显示红色边框，并在鼠标悬停时弹出放大内容面板。</p>
        </div>
        
        <h2>1. 不同字体大小测试</h2>
        <div class="test-section">
            <p>以下是不同字体大小的span元素，用于测试工具是否能正确识别目标字体大小：</p>
            <div class="font-size-test">
                <div class="test-item">
                    <div class="test-item-label">8px</div>
                    <span style="font-size: 8px;">这是8px的小字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">9px</div>
                    <span style="font-size: 9px;">这是9px的小字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">10px</div>
                    <span style="font-size: 10px;">这是10px的小字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">11px</div>
                    <span style="font-size: 11px;">这是11px的小字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">12px</div>
                    <span style="font-size: 12px;">这是12px的小字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">13px</div>
                    <span style="font-size: 13px;">这是13px的文字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">14px</div>
                    <span style="font-size: 14px;">这是14px的文字内容</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">16px (默认)</div>
                    <span style="font-size: 16px;">这是16px的正常文字内容</span>
                </div>
            </div>
        </div>
        
        <h2>2. 带换行的文字测试</h2>
        <div class="test-section">
            <p>以下是包含或不包含换行标签的span元素，用于测试工具是否能正确处理换行：</p>
            <div class="test-item with-br">
                <div class="test-item-label">带br标签的小字(12px)</div>
                <span style="font-size: 12px;">这是第一行文字<br>这是第二行文字<br>这是第三行文字<br>这是第四行文字<br>这是第五行文字</span>
            </div>
            <div class="test-item with-br">
                <div class="test-item-label">带br标签的正常文字(16px)</div>
                <span style="font-size: 16px;">这是第一行正常大小文字<br>这是第二行正常大小文字<br>这是第三行正常大小文字</span>
            </div>
            <div class="test-item">
                <div class="test-item-label">只有一行的小字</div>
                <span style="font-size: 12px;">这是没有换行的单行小字内容</span>
            </div>
        </div>
        
        <h2>3. 文本长度测试</h2>
        <div class="test-section">
            <p>以下是包含不同长度内容的span元素，用于测试工具的滚动条功能：</p>
            <div class="test-item">
                <div class="test-item-label">短内容小字</div>
                <span style="font-size: 12px;">这是一段较短的文字内容，用于测试普通情况。</span>
            </div>
            <div class="test-item">
                <div class="test-item-label">中等长度内容小字</div>
                <span style="font-size: 12px;">这是一段中等长度的文字内容，用于测试当弹出面板内容适中时的显示效果。这段文字比短内容要长一些，但还不足以触发滚动条。</span>
            </div>
            <div class="test-item long-content">
                <div class="test-item-label">长内容小字</div>
                <span style="font-size: 12px;">这是一段很长的文字内容，用于测试当弹出面板内容过多时是否能正确显示滚动条。这段文字将会非常长，需要滚动才能查看完整内容。继续添加更多文字以确保内容足够长，测试滚动条功能是否正常工作。文字不断增加，直到达到需要滚动的程度。再次添加更多文字，确保测试效果完整。继续填充内容，使面板必须显示滚动条才能查看全部内容。最后再添加一些文字，确保测试覆盖完整情况。</span>
            </div>
        </div>
        
        <h2>4. 页面不同位置测试</h2>
        <div class="test-section">
            <p>以下是位于页面不同位置的span元素，用于测试工具的智能定位功能：</p>
            <div class="different-positions">
                <div class="position-test top-left">
                    <span style="font-size: 12px;">左上角小字</span>
                </div>
                <div class="position-test top-right">
                    <span style="font-size: 12px;">右上角小字</span>
                </div>
                <div class="position-test bottom-left">
                    <span style="font-size: 12px;">左下角小字</span>
                </div>
                <div class="position-test bottom-right">
                    <span style="font-size: 12px;">右下角小字</span>
                </div>
                <div class="position-test center">
                    <span style="font-size: 12px;">居中位置小字</span>
                </div>
            </div>
        </div>
        
        <h2>5. 其他元素测试</h2>
        <div class="test-section">
            <p>以下是不同类型的HTML元素，用于测试工具是否能正确处理所有小字号元素：</p>
            
            <div class="test-item">
                <div class="test-item-label">div元素</div>
                <div style="font-size: 12px;">这是12px的div元素内容，工具应正常处理</div>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">p元素</div>
                <p style="font-size: 12px;">这是12px的p元素内容，工具应正常处理</p>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">a元素</div>
                <a href="#" style="font-size: 12px;">这是12px的链接内容，工具应正常处理</a>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">strong元素</div>
                <strong style="font-size: 12px;">这是12px的强调文字，工具应正常处理</strong>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">em元素</div>
                <em style="font-size: 12px;">这是12px的斜体文字，工具应正常处理</em>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">code元素</div>
                <code style="font-size: 12px;">这是12px的代码文本，工具应正常处理</code>
            </div>
        </div>
        
        <h2>6. 混合内容测试</h2>
        <div class="test-section">
            <p>以下是混合了不同元素的内容，用于测试工具在复杂场景下的表现：</p>
            
            <div class="mixed-content">
                <p>这是一段包含多种元素的文本：<span style="font-size: 12px;">这段是12px的小字内容</span>，而<span style="font-size: 16px;">这段是正常大小的文字</span>，还有一个<div style="font-size: 12px;">div元素的小字内容（工具应处理）</div>。</p>
            </div>
            
            <div class="mixed-content">
                <p>另一段混合文本：普通文字，<span style="font-size: 10px;">10px的极小文字</span>，<strong style="font-size: 12px;">12px的强调小字</strong>，<em style="font-size: 12px;">12px的斜体小字</em>，<a href="#" style="font-size: 12px;">12px的链接小字</a>，以及更多<span style="font-size: 14px;">14px的文字</span>。</p>
            </div>
            
            <div class="mixed-content">
                <h4 style="font-size: 12px;">12px的标题元素</h4>
                <p>这是一个包含<span style="font-size: 12px;">span小字</span>和<code style="font-size: 12px;">code小字</code>的段落。</p>
            </div>
        </div>
        
        <h2>7. 嵌套元素测试</h2>
        <div class="test-section">
            <p>以下是嵌套元素的测试，用于验证工具是否只为最内层的小字元素添加红框：</p>
            
            <div class="test-item">
                <div class="test-item-label">基本嵌套结构</div>
                <div style="font-size: 12px;">
                    这是一个外层div（12px），里面有<span style="font-size: 14px;">一个正常大小的span（14px）</span>，
                    和<span style="font-size: 10px;">一个更小的span（10px）</span>。
                </div>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">多层嵌套结构</div>
                <div style="font-size: 16px;">
                    外层div（正常大小16px）包含
                    <div style="font-size: 12px;">
                        第二层div（12px）包含
                        <div style="font-size: 10px;">
                            第三层div（10px）包含
                            <div style="font-size: 8px;">
                                最内层div（8px，应该只为此添加红框）
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">混合标签嵌套</div>
                <div style="font-size: 12px;">
                    外层div（12px）包含
                    <p style="font-size: 14px;">
                        p标签（14px）包含
                        <span style="font-size: 10px;">
                            span标签（10px）包含
                            <strong style="font-size: 12px;">
                                strong标签（12px）包含
                                <em style="font-size: 8px;">
                                    em标签（8px，应该只为此添加红框）
                                </em>
                            </strong>
                        </span>
                    </p>
                </div>
            </div>
            
            <div class="test-item">
                <div class="test-item-label">同大小嵌套元素</div>
                <div style="font-size: 12px;">
                    外层div（12px）包含
                    <span style="font-size: 12px;">
                        同大小的span（12px）包含
                        <strong style="font-size: 12px;">
                            同大小的strong（12px）
                        </strong>
                    </span>
                </div>
                <p>在此测试中，由于所有嵌套元素字体大小相同，工具应该只对最内层的strong元素添加红框。</p>
            </div>
        </div>
        
        <h2>8. 最小文字长度测试</h2>
        <div class="test-section">
            <p>以下是不同长度的文字测试，用于验证最小文字长度设置的功能：</p>
            
            <div class="font-size-test">
                <div class="test-item">
                    <div class="test-item-label">1字符</div>
                    <span style="font-size: 10px;">短</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">2字符</div>
                    <span style="font-size: 10px;">很短</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">3字符</div>
                    <span style="font-size: 10px;">比较短</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">4字符</div>
                    <span style="font-size: 10px;">稍微短点</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">5字符</div>
                    <span style="font-size: 10px;">标准长度啦</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">6字符</div>
                    <span style="font-size: 10px;">稍微长一点点</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">7字符</div>
                    <span style="font-size: 10px;">可以算中等长度</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">8字符</div>
                    <span style="font-size: 10px;">这是个八字符长度</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">9字符</div>
                    <span style="font-size: 10px;">这里有九个字符长度</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">10字符</div>
                    <span style="font-size: 10px;">这是10个字符的长度</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">11字符</div>
                    <span style="font-size: 10px;">这是十一个字符测试长度</span>
                </div>
                <div class="test-item">
                    <div class="test-item-label">12字符</div>
                    <span style="font-size: 10px;">这里包含了十二字符的内容</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>